<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>点名器</title>
	<style>
		#main{
			height:300px;width:600px;
			background-color:#abcdef;
			margin:0 auto;
			margin-top: 150px;
			border-radius:40px;
			border: 1px solid #abcdef;
			box-shadow:-20px 20px 50px #666;
		}
		#content{
			font-family: 雅黑;
			color:#333;
			font-size: 5em;
			text-align: center;
			margin-top: 50px;
		}
		#bbt{
			font-family: 幼圆;
			color:#c00;
			font-size: 2.5em;
			border: 1px solid red;
			border-radius:25px;
			height:80px;
			margin: 40px auto;
			background-color: #eee;
			display: block;
			cursor:pointer;
		}
	</style>
</head>
<body>
	<div id="main">
		<div id="content">我是点名器</div>
		<button onClick="tip()" id="bbt">点击开始</button>
	</div>

	<script>
	var	list = ['C','C++','C#','JAVA','VB','VBS','Pascal','SQL','Perl','PHP','Python','ASP','.NET','JavaScript','R','Swift','Ruby','HTML','CSS','Go','JSP','Node.js','Mysql'];
	var timer = null;
	
	function tip () {
		var btn = document.getElementById('bbt');
		if (timer==null) {
			btn.style.backgroundColor = '#333';
			btn.style.color = '#eee';
			btn.innerHTML = '点击停止';
			run();
		}else{
			btn.style.backgroundColor = '#eee';
			btn.style.color = '#c00';
			btn.innerHTML = '点击开始';
			clearTimeout(timer);
			timer = null;
		}
	}

	function run () {
		var con = document.getElementById('content');
		var i = Math.round(Math.random()*(list.length-1));
		con.innerHTML=list[i];
		timer = setTimeout(run,5);
	}
	</script>
	
</body>
</html>